<template>
	<view class="my-banlance">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">奖金转赠</block>
		</cu-custom>
		<view class="top-header bg-gradual-orange shadow shadow-lg">
			<view class="able-num">
				<view class="banlance-num">{{money}}</view>
				<view class="banlance-tips">当前可转赠奖金</view>
			</view>
			<view @click="toList" class="go-withdrawal">转赠明细</view>

		</view>
		<view class="getAction">
			<view class="action-item action-name">
				<!-- <view class="action-title">核对转账信息</view> -->
				<view class="action-title" style="color:red;font-weight: 600;">
					温馨提醒：
					<view>
						1.一定要核对对方的手机号码,转账失误无法退回。
					</view>
					<view>
						2.转赠金额仅限消费，不可提现。
					</view>
				</view>
			</view>

			<view class="action-item cu-form-group">
				<label for="money" class="item-title">对方手机号</label>
				<input id="money" v-model="form.mobile" class="text-red" type="number" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">转账金额</label>
				<input id="money" v-model="form.applyMoney" class="text-red" type="number" />
			</view>
			<view class="submit-btn action-item flex flex-direction">
				<button class="cu-btn bg-red lg" @tap="subApply">确认转账</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import banlance from '@/api/banlance';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				form: {
					applyMoney: 0.00,
					mobile: '',
				},
				canUse: 0.00,
				canNotUse: 0.00,
				money: 0,
			}
		},
		onShow() {
			this.getRecord()
		},
		onLoad() {},
		computed: {
			canMoney() {
				if (this.canUse > 0) {
					return this.canUse.toFixed(2);
				} else {
					return '0.00';
				}
			},
			watchMoney() {
				if (this.money >= this.form.applyMoney) {
					return 0;
				} else {
					return 1;
				}
			},
			...mapState(['userInfo', 'hasLogin']),

		},
		methods: {
			toList() {
				uni.navigateTo({
					url: '/pages/my/balance/transferList'
				})
			},
			async getRecord() {
				banlance.getRecord().then(res => {
					if (res.code == 1) {
						this.applyList = res.data.list;
						this.money = res.data.money
						for (let i = 0; i < this.applyList.length; i++) {
							if (this.applyList[i].status == 1) {
								this.canNotUse += parseInt(this.applyList[i].money);
							}
						}
						this.canUse = this.userInfo.money - this.canNotUse;

						console.log(this.canNotUse);
					} else {
						console.log(res);
					}
				});

			},
			async subApply() {

				let that = this
				console.log(this.form)
				// alert(this.form.applyMoney)
				if (this.form.applyMoney < 1) {
					this.showModels('转账金额不得低于1元');
					return false;
				}

				if (this.form.applyMoney % 1 !== 0) {
					this.showModels('转账金额必须是 1 的整数倍');
					return false;
				}

				if (!this.form.mobile) {
					return uni.showToast({
						title: '请输入对方手机号',
						icon: 'none'
					});
					return false;
				}


				uni.showModal({
					title: '余额转赠',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入密码', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							if (!res.content) {
								return this.toast('密码不能为空')
							}
							that.checkpass(res.content)
							console.log('输入的内容：', res.content);

						}
					}
				});


			},
			async checkpass(password) {
				let res = await banlance.checkpass({
					password: password
				})

				if (res.code == 1) {
					this.totransfer();
				} else {
					this.showModels(res.msg);
				}
			},
			async totransfer() {
				let res = await banlance.transfer({
					'money': this.form.applyMoney,
					'uid': this.userInfo.id,
					...this.form
				})

				if (res.code == 1) {
					this.showModels(res.msg);
					this.canUse = this.canUse - this.applyMoney;
					this.applyMoney = 0.00;
					this.getRecord()

					// setTimeout(() => {
					// 	uni.switchTab({
					// 		url:'pages/my/index'
					// 	})
					// }, 1000)

				} else {
					this.showModels(res.msg);
				}
			},
			showModels(message) {
				uni.showModal({
					title: '提示',
					content: message,
					showCancel: false,
					success: function(res) {}
				});
			}
		}
	}
</script>

<style lang="less">
	.go-withdrawal {
		display: inline-flex;
		/* 让元素宽度跟随内容 */
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ffffff;
		padding: 0 10rpx;
		/* 适当增加左右间距，让边框不紧贴文字 */
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		white-space: nowrap;
		/* 防止文字换行 */
	}

	.my-banlance {
		.top-header {
			height: 210rpx;
			text-align: center;
		}

		.able-num {
			padding-top: 60rpx;

			.banlance-num {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 50rpx;
				font-weight: 550;
			}

			.banlance-tips {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 25rpx;
			}
		}

		.getAction {
			margin-top: 20rpx;

			.action-item {
				margin: 0 30rpx;
			}

			.submit-btn {
				margin-top: 30rpx;
			}
		}

		.action-name {
			height: 230rpx;
			line-height: 50rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #ccc;
			color: #666;

			.action-title {
				padding-top: 20px;
			}
		}

		.item-title {
			margin-right: 20rpx;
		}
	}
</style>